import React from "react";
import { Skeleton, OrbitProvider, defaultTheme } from "@kiwicom/orbit-components";

export default {
  Example: () => (
    <OrbitProvider theme={defaultTheme}>
      <Skeleton rows={6} rowOffset={30} rowHeight={21} />
    </OrbitProvider>
  ),
  exampleKnobs: [
    {
      component: "Skeleton",
      knobs: [
        {
          name: "color",
          type: "select",
          options: [
            "paletteProductLight",
            "paletteProductLightHover",
            "paletteProductLightActive",
            "paletteProductNormal",
            "paletteProductNormalHover",
            "paletteProductNormalActive",
            "paletteProductDark",
            "paletteProductDarkHover",
            "paletteProductDarkActive",
            "paletteProductDarker",
            "paletteWhite",
            "paletteWhiteHover",
            "paletteWhiteActive",
            "paletteCloudLight",
            "paletteCloudLightHover",
            "paletteCloudLightActive",
            "paletteCloudNormal",
            "paletteCloudNormalHover",
            "paletteCloudNormalActive",
            "paletteCloudDark",
            "paletteCloudDarker",
            "paletteCloudDarkerHover",
            "paletteCloudDarkerActive",
            "paletteInkLight",
            "paletteInkLightHover",
            "paletteInkLightActive",
            "paletteInkNormal",
            "paletteInkNormalHover",
            "paletteInkNormalActive",
            "paletteInkDark",
            "paletteInkDarkHover",
            "paletteInkDarkActive",
            "paletteOrangeLight",
            "paletteOrangeLightHover",
            "paletteOrangeLightActive",
            "paletteOrangeNormal",
            "paletteOrangeNormalHover",
            "paletteOrangeNormalActive",
            "paletteOrangeDark",
            "paletteOrangeDarkHover",
            "paletteOrangeDarkActive",
            "paletteOrangeDarker",
            "paletteRedLight",
            "paletteRedLightHover",
            "paletteRedLightActive",
            "paletteRedNormal",
            "paletteRedNormalHover",
            "paletteRedNormalActive",
            "paletteRedDark",
            "paletteRedDarkHover",
            "paletteRedDarkActive",
            "paletteRedDarker",
            "paletteGreenLight",
            "paletteGreenLightHover",
            "paletteGreenLightActive",
            "paletteGreenNormal",
            "paletteGreenNormalHover",
            "paletteGreenNormalActive",
            "paletteGreenDark",
            "paletteGreenDarkHover",
            "paletteGreenDarkActive",
            "paletteGreenDarker",
            "paletteBlueLight",
            "paletteBlueLightHover",
            "paletteBundleBasic",
            "paletteBundleMedium",
            "paletteBlueLightActive",
            "paletteBlueNormal",
            "paletteBlueNormalHover",
            "paletteBlueNormalActive",
            "paletteBlueDark",
            "paletteBlueDarkHover",
            "paletteBlueDarkActive",
            "paletteBlueDarker",
            "paletteSocialFacebook",
            "paletteSocialFacebookHover",
            "paletteSocialFacebookActive",
          ],
          defaultValue: "paletteCloudDark",
        },
        {
          name: "rows",
          type: "number",
          defaultValue: 6,
        },
        {
          name: "rowOffset",
          type: "number",
          defaultValue: 30,
        },
        {
          name: "rowHeight",
          type: "number",
          defaultValue: 21,
        },
      ],
    },
  ],
};
